<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../JS/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
		    .v-enter,
		    .v-leave-to {
		      opacity: 0;
		      transform: translateX(30px);
		    }
		
		    .v-enter-active,
		    .v-leave-active {
		      position: absolute;
		      transition: all 0.3s ease;
		    }
		  </style>
	</head>
	<body>
		<div id="app">
			<a  @click="flag='login'">登录</a>|<a @click="flag='register'">注册</a>
			<!-- 动画组件 -->
			<transition mode="out-in">
				<component :is="flag"></component>
			</transition>
			
		</div>

		<!-- 定义组件 -->
		<template id="login">
			<div id="">
				<fieldset>
					<legend>登录</legend>
					<span>账号：</span><input type="text"><br>
					<span>密码：</span><input type="text"><br>
					<button>登录</button>
					<button>取消</button>
				</fieldset>
				{{ msg }}
			</div>
			
		</template>

		<template id="register">
			<div id="">
				<fieldset>
					<legend>注册</legend>
					<span>账号：</span><input type="text"><br>
					<span>密码：</span><input type="text"><br>
					<span>邮箱：</span><input type="text"><br>
					<button>注册</button>
					<button>取消</button>
				</fieldset>
				{{ msg }}
			</div>
			
		</template>

		<script>
			Vue.component('login', {
				template: '#login',
				data(){
					return { msg:'这是一个登录框子'}
				}
			})
			Vue.component('register', {
				template: '#register',
				data(){
					return { msg:'这是一个注册框子'}
				}
			})

			let app = new Vue({
				el: '#app',
				data: {
					flag: 'login'
				}
			})
		</script>
	</body>
</html>
